[VueJS] 태그 이름 무시, vue 컴포넌트 제외하는 방법

VueJS에서 컴포넌트가 아닌 태그를 사용할 경우 에러가 발생합니다. 어떻게 하면 에러가 나타나지 않을까요?

예를들어 <myTag></myTag>라는 태그를 웹페이지에 코드에 추가한다고 가정해봅니다.

VueJS에서는 myTag가 Vue에 등록된 태그라고 인식하고 찾기 시작할텐데요 ... 실제로 VueJS의 목적으로 생성한 태그가 아니므로 찾을 수 없어 에러가 나타날 것입니다. 이를 방지하기 위해서 config를 설정하는 방법이 존재합니니다. 아래를 봐주세요.

# VueJS 예외 컴포넌트, 태그 설정하기

이 방법을 적용하면 당연히 위와 같은 상황에서도 에러가 나타나지 않습니다. 예외 컴포넌트 태그명으로 지정했기 때문이죠... 방법은 간단한데요 ~ 아래처럼 Vue.config.ignoredElements를 설정하면 됩니다.

Vue.config.ignoredElements = [ tagName1, tagName2, ... ]


위와 같이 배열로 여러 개를 설정할 수 있습니다. 매우 쉽고 간단하죠.

그럼 myTag를 등록하면 어떻게 될까요?

이제 myTag라는 태그가 사용되어도 더 이제 에러가 더 이상 나타나지 않을 것입니다. 앞에도 얘기했지만 표준 태그가 아닌 경우 VueJS는 커스텀 컴포넌트로 인식하고 계속해서 찾으려고 시도하는 문제가 발생합니다. 즉 이를 해결하는 방법은 오직 예외 태그로 위와 같이 등록하는 방법이죠.

여기까지 vue 컴포넌트에서 제외하는 방법을 알아보았습니다.